<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Evaluation</title>

    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.4.1/css/bootstrap.min.css" th:href="@{/webjars/bootstrap/css/bootstrap.min.css}" rel="stylesheet">

    <link href="../../static/layui/css/layui.css" th:href="@{/webjars/layui/css/layui.css}" rel="stylesheet">

    <script type="text/javascript" src="https://cdn.staticfile.org/jquery/3.4.0/jquery.min.js" th:src="@{/webjars/jquery/jquery.min.js}"></script>
    <script type="text/javascript" src="https://cdn.staticfile.org/twitter-bootstrap/3.4.1/js/bootstrap.min.js" th:src="@{/webjars/bootstrap/js/bootstrap.min.js}"></script>
    <script type="text/javascript" src="https://cdn.staticfile.org/distpicker/2.0.5/distpicker.min.js"></script>
    <script type="text/javascript" src="https://cdn.staticfile.org/store.js/1.3.20/store.min.js" th:src="@{/webjars/store.js/store.min.js}"></script>

    <script type="text/javascript" src="../../static/layui/layui.all.js" th:src="@{/webjars/layui/layui.all.js}"></script>
    <script type="text/javascript" src="../../static/layui/layui.js" th:src="@{/webjars/layui/layui.js}"></script>
    <script type="text/javascript" src="../../static/js/common.js" th:src="@{/js/common.js}"></script>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">

    <!-- 头部导航栏 -->
    <div id="header-navigation-div-id"></div>

    <!-- 侧边导航栏 -->
    <div id="side-navigation-div-id"></div>

    <!-- 内容主体区域 -->
    <div class="layui-body" style="left: 300px;">

        <!--    数据展示表格    -->
        <div style="margin: 40px 10px; padding: 0 10px; border: 1px solid #1E9FFF; border-radius: 5px;">
            <table id="dataTableId" lay-filter="dataTableId"></table>
        </div>

        <!--  分割线  -->
        <hr class="layui-bg-blue" style="margin-bottom: 30px;">

        <!--  分配表单  -->
        <div style="padding: 15px; display: none;" id="allocation-form-div-id">
            <div class="layui-container" style="
                border: 1px solid #1E9FFF;
                float: right;
                margin: 0 230px;
                padding: 20px;
                background-color: #e2e2e2;
                border-radius: 10px;
                  ">
                <form id="add-info-form" action="#" method="post" class="form-horizontal" role="form" style="width: 95%; margin-top: 50px;">

                    <input type="hidden" id="fault-id">

                    <fieldset disabled>
                        <div class="form-group">
                            <label for="equipment-id" class="col-sm-2 control-label">设备编号</label>
                            <div class="col-sm-4">
                                <input type="text" class="form-control" id="equipment-id">
                            </div>
                            <label for="fault-type" class="col-sm-2 control-label">故障类型</label>
                            <div class="col-sm-4">
                                <input type="text" class="form-control" id="fault-type">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="report-user" class="col-sm-2 control-label">报修人</label>
                            <div class="col-sm-4">
                                <input type="text" class="form-control" id="report-user">
                            </div>
                            <label for="phone-number" class="col-sm-2 control-label">联系电话</label>
                            <div class="col-sm-4">
                                <input type="text" class="form-control" id="phone-number">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="report-create-time" class="col-sm-2 control-label">报修时间</label>
                            <div class="col-sm-4">
                                <input type="text" class="form-control" id="report-create-time">
                            </div>
                            <label for="report-modified-time" class="col-sm-2 control-label">更新时间</label>
                            <div class="col-sm-4">
                                <input type="text" class="form-control" id="report-modified-time">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="contact-address" class="col-sm-2 control-label">联系地址</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="contact-address">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="fault-description" class="col-sm-2 control-label">故障描述</label>
                            <div class="col-sm-10">
                                <textarea class="form-control" id="fault-description" rows="3" style="resize:none"></textarea>
                            </div>
                        </div>
                    <div class="form-group">
                        <label for="repair-material" class="col-sm-2 control-label">维修材料</label>
                        <div class="col-sm-10">
                            <textarea class="form-control" id="repair-material" rows="3" style="resize:none"></textarea>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="repair-record" class="col-sm-2 control-label">维修记录</label>
                        <div class="col-sm-10">
                            <textarea class="form-control" id="repair-record" rows="3" style="resize:none"></textarea>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="revisit-record" class="col-sm-2 control-label">回访记录</label>
                        <div class="col-sm-10">
                            <textarea class="form-control" id="revisit-record" rows="3" style="resize:none"></textarea>
                        </div>
                    </div>
                    </fieldset>
                    <div class="form-group">
                        <label for="evaluation-satisfaction" class="col-sm-2 control-label"><span style="margin-right: 5px;font-size: 12px;color: red;">*</span>满意度</label>
                        <input type="hidden" id="evaluation-satisfaction">
                        <div class="col-sm-10">
                            <div id="rate-div-id"></div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="evaluation-content" class="col-sm-2 control-label"><span style="margin-right: 5px;font-size: 12px;color: red;">*</span>评价内容</label>
                        <div class="col-sm-10">
                            <textarea class="form-control" id="evaluation-content" rows="3" style="resize:none" placeholder="请填写评价内容"></textarea>
                        </div>
                    </div>
                    <div class="form-group" id="btn-div-id">
                        <div class="col-sm-offset-2 col-sm-12" style="width: 40%; margin: 0 auto; float: right;">
                            <button class="btn btn-success" id="evaluation-btn" style="width: 100px; float: right;">提交</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- 页脚 -->
    <div id="footer-div-id"></div>
</div>

<script type="text/javascript">

    window.onload = function (ev) {

        // 页面初始化
        pageAfterOnloadInit();

        document.getElementById('evaluation-btn').onclick = revisitFormSuccessEvent;

        // 退出事件
        document.getElementById('logout-btn-id').onclick = logoutEvent;
    }

</script>


<script type="text/html" id="tableBarRepairHandle">
    <a class="layui-btn layui-btn-xs" lay-event="evaluation">评价</a>
</script>

<script type="text/javascript">

    //////////////// function defined ///////////////////////////////


    function checkEvaluationSatisfactionAndTip() {
        var repairMaterial = $("#evaluation-satisfaction").val().trim();
        if (typeof repairMaterial == "undefined" || repairMaterial == null || repairMaterial.length <= 0 || repairMaterial === '0') {
            kingLayerMsg('请选择满意度!', airConditionerDefaultLayerMsgOptions);
            return false;
        }
        return true;
    }

    function checkEvaluationContentAndTip() {
        var repairMaterial = $("#evaluation-content").val().trim();
        if (typeof repairMaterial == "undefined" || repairMaterial == null || repairMaterial.length <= 0) {
            kingLayerMsg('请填写评价内容!', airConditionerDefaultLayerMsgOptions);
            return false;
        }
        return true;
    }

    function revisitFormSuccessEvent() {

        if (checkEvaluationSatisfactionAndTip() && checkEvaluationContentAndTip()) {
            $.ajax({
                url: EVALUATION_BASE_MAPPING_V1 + "/add",
                type: "post",
                async: false,
                data: {
                    'faultId': $("#fault-id").val().trim(),
                    'satisfaction': $("#evaluation-satisfaction").val().trim(),
                    'content': $("#evaluation-content").val().trim()
                },
                success: function (result, status, xhr) {
                    var obj = JSON.parse(result);
                    var code = obj.code;
                    var message = obj.message;
                    var data = obj.data;
                    if (code !== 200) {
                        kingLayerMsg(message, airConditionerDefaultLayerMsgOptions);
                    } else {
                        kingLayerMsg("已提交！", airConditionerDefaultLayerMsgOptions);

                        // 关闭 allocation 表单
                        document.getElementById('allocation-form-div-id').style.display = 'none';

                        // 重载数据表
                        var url = FAULT_BASE_MAPPING_V1 + "/revisited";
                        var tableData = getDataFromServer(url);
                        layui.use('table', function () {
                            var table = layui.table;
                            table.reload('dataTableId', {
                                data: tableData
                            })
                        });
                    }
                }
            });
        }
        return false;
    }

    // 页面初始化，可以进入这个页面的身份有：CUSTOM_SERVICE
    function pageAfterOnloadInit() {

        initHeaderNavigationDiv();
        initSideNavigationDivOrdinaryFault();

        initFooterDiv();
        // layui 初始化
        layuiInit();

        // layui 数据表格初始化
        layuiTableInitCustom();

    }
    
    function layuiRateInit() {
        layui.use('rate', function(){
            var rate = layui.rate;

            //渲染
            var ins1 = rate.render({
                elem: '#rate-div-id',  //绑定元素
                text: true,
                choose: function(value){
                    $("#evaluation-satisfaction").val(value);
                }
            });

            console.log(ins1);
        });
    }
    

    // custom layui table 初始化
    function layuiTableInitCustom() {
        layui.use('table', function () {
            var table = layui.table;

            var url = FAULT_BASE_MAPPING_V1 + "/revisited";
            var tableData = getDataFromServer(url);

            // 表格渲染
            table.render({
                elem: '#dataTableId',
                id: 'dataTableId',
                url: '',        // 默认数据查询数据接口
                loading: true,  // 显示加载条
                page: true,     // 开启分页
                even: true,     // 设置隔行背景
                data: tableData,
                cols: [
                    [   //表头
                        {field: 'id', hide: true},
                        {field: 'equipmentId', title: '设备编号', sort: true, align: 'center', width: 139},
                        {field: 'type', title: '故障类型', sort: true, align: 'center', width: 119},
                        {field: 'realName', title: '报修人', sort: true, align: 'center', width: 119},
                        {field: 'allocationUser', title: '分配人', sort: true, align: 'center', width: 119},
                        {field: 'repairUser', title: '维修人', sort: true, align: 'center', width: 119},
                        {field: 'revisitUser', title: '回访人', sort: true, align: 'center', width: 119},
                        {field: 'phoneNumber', title: '联系电话', sort: true, align: 'center', width: 119},
                        {field: 'gmtModified', title: '刷新时间', sort: true, align: 'center', width: 169},
                        {field: 'description', title: '故障描述', sort: true, align: 'center'},
                        {title: '操作', width: 99, align: 'center', toolbar: '#tableBarRepairHandle'}
                    ]
                ]
            });

            //监听行工具事件，行末按钮事件
            table.on('tool(dataTableId)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
                var data = obj.data;         //获得当前行数据
                var layEvent = obj.event;    //获得 lay-event 对应的值
                if (layEvent === 'evaluation') {

                    // 填充 handle 表单
                    var url = FAULT_BASE_MAPPING_V1 + "/" + data.id;
                    var fault = getDataFromServer(url);

                    $("#fault-id").val(fault.id);
                    $("#equipment-id").val(fault.airConditioner.equipmentId);
                    $("#fault-type").val(data.type);
                    $("#report-user").val(data.realName);
                    $("#phone-number").val(data.phoneNumber);
                    $("#report-create-time").val(fault.gmtCreate);
                    $("#report-modified-time").val(fault.gmtModified);
                    $("#contact-address").val(fault.contactAddress);
                    $("#fault-description").text(fault.description);
                    $("#repair-material").text(fault.repair.material);
                    $("#repair-record").text(fault.repair.record);
                    $("#revisit-record").text(fault.revisit.record);
                    $("#evaluation-satisfaction").val('');
                    $("#evaluation-content").val('');

                    // layui 评分初始化
                    layuiRateInit();

                    // 打开 allocation 表单
                    document.getElementById('allocation-form-div-id').style.display = 'block';

                    url = FAULT_BASE_MAPPING_V1 + "/revisited";
                    var tableData = getDataFromServer(url);
                    table.reload('dataTableId', {
                        data: tableData
                    });

                }
            });
        });
    }

    function getDataFromServer(url) {
        var outResult = {};
        $.ajax({
            url: url,
            type: "get",
            async: false,
            success: function (result, status, xhr) {
                var obj = JSON.parse(result);
                var code = obj.code;
                var message = obj.message;
                var data = obj.data;
                if (code !== 200) {
                    kingLayerMsg(message, airConditionerDefaultLayerMsgOptions);
                } else {
                    outResult = data;
                }
            }
        });
        return outResult;
    }

</script>
</body>
</html>